<template>
    <div class="gradingNamepPage">
      <el-form :inline="true" :model="queryParams" size="small" style="display: flex;justify-content: space-between;">
        <div>
          <!-- <el-form-item label="级配类型">
            <el-select style="width: 120px" v-model="queryParams.type" clearable size="mini" placeholder="请选择级配类型">
              <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type" :value="item.type"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="级配类型">
            <el-select style="width: 120px" v-model="queryParams.type" clearable size="mini" placeholder="级配类型">
              <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type" :value="item.type"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="配方名称">
            <el-input style="width: 120px" size="mini" v-model="queryParams.name" placeholder="配方名称" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="handleQuery(true)">查询</el-button>
            <!-- v-if="$hasPermission('api:asphaltMatchName:list')" -->
          </el-form-item>
        </div>
        
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="showEdit()">添加</el-button> <!-- v-if="$hasPermission('api:asphaltMatchName:save')" -->
        </el-form-item>
      </el-form>

    <div>
      <el-table :data="dataList" :header-cell-style="{ 'text-align': 'center' }" fit border size="mini" highlight-current-row stripe>
        <el-table-column prop="name" label="配方名称" align="center"></el-table-column>
        <el-table-column prop="type" label="级配类型" align="center"></el-table-column>
        <el-table-column prop="maxSieveSize" label="最大粒径(mm)" align="center"></el-table-column>
        <el-table-column prop="nominalMaxSieveSize" label="公称最大粒径(mm)" align="center"></el-table-column>
        <el-table-column prop="info" label="备注" align="center"></el-table-column>
        <el-table-column prop="updateName" label="修改人" align="center"></el-table-column>
        <el-table-column prop="updateDate" label="修改时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" @click="showEdit(scope.row.id)">编辑</el-link> <!-- v-if="$hasPermission('api:asphaltMatchName:edit')" -->
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" @click="onDelete(scope.row.id)">删除</el-link> <!-- v-if="$hasPermission('api:asphaltMatchName:remove')" -->
          </template>
        </el-table-column>
      </el-table>
      <pagination class="fenye" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

      <el-dialog :title="isAdd ? '添加配方名称' : '修改配方名称'" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="doClose" width="600px">
        <div>
          <el-form ref="editForm" :model="form" :rules="rules" label-width="120px" class="myForm" size="small">
            <el-form-item label="级配类型" prop="type">
              <el-select style="width: 150px" v-if="isAdd" v-model="form.type" clearable size="mini" placeholder="请选择级配类型">
                <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type" :value="item.type"></el-option>
              </el-select>
              <span v-else>{{ form.type }}</span>
            </el-form-item>
            <el-form-item label="配方名称" prop="name">
              <el-input placeholder="配方名称" v-model="form.name" maxlength="20" v-if="isAdd"></el-input>
              <span v-else>{{ form.name }}</span>
            </el-form-item>
            <el-form-item label="备注" prop="info">
              <el-input type="textarea" placeholder="备注" v-model="form.info" maxlength="200"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer">
          <el-button size="mini" @click="doClose">取消</el-button>
          <el-button type="primary" size="mini" @click="doSubmit" :loading="submitLoading">确定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { asphaltMatchName, asphaltMatchNameListSelect, asphaltMatchNameLook, asphaltMatchNameAdd, asphaltMatchNameEdit, asphaltMatchNameRemove } from "@/api/bitumenMixingStation/gradingSetting/gradingName";
import constant from "@/api/waterStability/producedData/constant";


export default {
    name: 'gradingName',
    data() {
        return {
            matchTypeList: [],
            dataList: [],
            visible: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: ''
            },
            total: 0,
            isAdd: false,
            loading: false,
            submitLoading: false,
            form: {
                type: '',
                name: '',
                info: ''

            },
            rules: {
                type: [{ required: true, message: '请选中配比类型', trigger: 'change' }],
                name: [{ required: true, message: '请输入配方名称', trigger: 'blur' }]
            },
        };
    },
    mounted() {
        this.getList()
        this.getAsphaltMatchNameListSelect()
    },
    methods: {
        getAsphaltMatchNameListSelect() {
            asphaltMatchNameListSelect().then((res) => {
                console.log(res);
                this.matchTypeList = res.data
            })
        },
        /*** 初始化表单* @returns 表单数据*/
        initForm() {
            return {
                sieveArray: []
            };
        },
        getList() {
            this.loading = true;
            asphaltMatchName(this.queryParams).then((res) => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        /*** 提交表单*/
        doSubmit() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.submitLoading = true
                    if (this.isAdd) {
                        // 新增
                        asphaltMatchNameAdd(this.form).then((res) => {
                            this.$message.success("新增设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    } else {
                        // 修改
                        asphaltMatchNameEdit(this.form).then((res) => {
                            this.$message.success("修改设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    }
                }
            });
        },
        /*** 关闭弹窗*/
        doClose() {
            this.visible = false;
        },
        // 删除
        onDelete(id) {
            this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                asphaltMatchNameRemove(id).then((res) => {
                    this.getList();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                });
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        showEdit(id) {
            this.visible = true;
            this.isAdd = null == id || undefined == id;
            this.loading = false;
            this.submitLoading = false;
            this.$nextTick(() => {
                if (this.isAdd) {
                    this.form = this.initForm();
                    this.$refs['editForm'].resetFields();
                } else {
                    this.infoForm(id);
                }
            });
        },
        infoForm(id) {
            this.loading = true;
            this.$refs['editForm'].clearValidate();
            asphaltMatchNameLook(id).then((res) => {
                this.form = res.data;
                this.loading = false;
            }).catch(() => {
                this.form = {}
                this.loading = false;
            });
        },
    }
};
</script>

<style scoped>
.gradingNamepPage {
    padding: 16px;
}
</style>